<template>
  <div class="block">
    <el-container>
      <div
        class="el-main"
        style="display: flex; justify-content: space-between; gap: 20px; height: 100%;"
      >
        <!-- 左侧查询条件部分 -->
        <div class="container-top" style="flex: 1;">
          <div class="block block-custom">
            <!-- 查询条件部分 -->
            <div style="margin-top: 10px; margin-left: 10px;">
              <label class="label-text">站场名称</label>
              <el-select
                v-model="queryData.stationName"
                placeholder="请选择"
                clearable
                style="width: 90px"
                class="filter-item"
              >
                <el-option
                  v-for="(item, index) in stationNameOptions"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>

              <label class="label-text">机车号</label>
              <el-input
                v-model.trim="queryData.trainNo"
                placeholder="请输入"
                style="width: 90px;"
                class="filter-item"
              />

              <label class="label-text">开始时间</label>
              <el-date-picker
                v-model="queryData.startTime"
                type="datetime"
                placeholder="选择日期时间"
                placement="bottom-start"
              ></el-date-picker>

              <label class="label-text">结束时间</label>
              <el-date-picker
                v-model="queryData.endTime"
                type="datetime"
                placeholder="选择日期时间"
                placement="bottom-start"
              ></el-date-picker>

              <el-button @click="reset">重置</el-button>
              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查询</el-button>
            </div>
            <common-table
              :queryData="queryData"
              :columns="columns"
              :fetchData="fetchData"
              ref="table"
            >
              <!-- <template #append>
                <el-table-column label="操作" align="center" width="100">
                  <template slot-scope="scope">
                    <el-button type="text" @click="openDetail(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </template> -->
            </common-table>
          </div>
        </div>
      </div>
      <div
        class="el-main"
        style="display: flex; justify-content: space-between; gap: 20px; height: 100%;"
      >
        <!-- 右侧图表部分 -->
        <div class="container-top" style="width: 480px; height: 900px;">
          <div class="block block-custom" style="width: 480px; height: 900px;">
            <!-- 饼图容器 -->
            <div ref="pieChart" style="width: 100%; height: 40%;"></div>
            <div ref="pieChart2" style="width: 100%; height: 40%;"></div>
          </div>
        </div>
      </div>
    </el-container>
    <!-- 弹框部分 -->
  </div>
</template>

<script>
import * as echarts from 'echarts' // 导入 echarts 库
import CommonTable from './commonTable.vue'
import { getStationNames } from '@/api/dataQuery'
import { getDataJobTicket, getDataPieChartData, postShiftPlanDepart } from '@/api/statistics'
import dayjs from 'dayjs'
import { logger } from 'runjs/lib/common'
export default {
  components: {
    CommonTable
  },
  data() {
    return {
      queryData: {
        startTime: dayjs()
          .subtract(19, 'd')
          .format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        stationName: '',
        trainNo: ''
      },
      total: 10,
      currentPage: 1,
      pageSize: 10,
      stationNameOptions: [],
      newData:[],
      dialogFormVisible: false,
      columns: [
        {
          prop: 'stationName',
          label: '站场名称',
          width: '80',
          formatter: row => {
            return `${row.workItem.station}`
          }
        },
        {
          prop: 'workItemNo',
          label: '作业单',
          width: '70',
          formatter: row => {
            return `${row.workItem.workItemNo}`
          }
        },
        {
          prop: 'shuntNum',
          label: '勾数',
          width: '50',
          formatter: row => {
            return `${row.workItem.shuntNum}`
          }
        },
        {
          prop: 'locmotiveNo',
          label: '机车号',
          width: '70',
          formatter: row => {
            return `${row.workItem.locmotiveNo}`
          }
        },
        {
          prop: 'zyxm',
          label: '编组',
          width: '50',
          formatter: row => {
            return `${row.workItem.zyxm}`
          }
        },
        { prop: 'kxzxTimes', label: '空间走行时间', width: '110' },
        {
          prop: 'beginTime',
          label: '作业计划开始时间',
          width: '135',
          formatter: row => {
            return `${row.workItem.beginTime}`
          }
        },
        {
          prop: 'endTime',
          label: '作业计划结束时间',
          width: '135',
          formatter: row => {
            return `${row.workItem.endTime}`
          }
        },
        { prop: 'beginTime', label: '作业实际开始时间', width: '135' },
        { prop: 'endTime', label: '作业实际结束时间', width: '135' },
        { prop: 'avgTime', label: '平均完成时间', width: '135' }
      ],
      columns1: [
        { prop: 'hungNo', label: '勾号', width: '100' },
        { prop: 'gdName', label: '股道名称', width: '160' },
        { prop: 'workMethodDict', label: '作业类型', width: '160' },
        { prop: 'numOfTrain', label: '车数', width: '160' },
        //{ prop: 'hungState', label: '勾状态', width: '150' },
        { prop: 'tip', label: '备注', width: '200' }
      ]
    }
  },
  mounted() {
    // this.initPieChart(); // 初始化饼图
    this.getAllStationNames()
    // this.getData(this.pageSize,this.currentPage)
    // this.initPieChart2(); // 初始化饼图
  },
  methods: {
    initPieChart(dom, datas) {
      const chart = echarts.init(dom) // 初始化echarts实例
      const option = {
        title: {
          text: datas.title,
          left: 'center',
          textStyle: {
            color: '#999',
            fontWeight: 'normal',
            fontSize: 20
          }
        },
        series: [
          {
            type: 'pie',
            radius: [20, 80],
            top: `${top}%`, // 设置 top，使每个饼图位于不同的位置
            height: '50%', // 设置高度
            left: 'center',
            width: '80%',
            // itemStyle: {
            //   borderColor: '#fff',
            //   borderWidth: 1
            // },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 0,
              // 也可以在这里为单个数据项配置颜色
              color: function(params) {
                const colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272']
                return colorList[params.dataIndex]
              }
            },

            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{time|{c} 勾}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function(params) {
              const isLeft = params.labelRect.x < chart.getWidth() / 2
              const points = params.labelLinePoints
              points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
              return {
                labelLinePoints: points
              }
            },

            data: (datas.data || []).map(v => {
              return {
                name: v.label,
                value: v.value
              }
            })
          }
        ]
      }
      chart.setOption(option) // 设置图表配置
    },
    openDetail(row) {
      console.log(row,'rrr');
      
      this.dialogFormVisible = true
      this.editRow = row
    },
    fetchDataDeaild() {
      return {
        code: 0,
        data: this.editRow.hungItemList
      }
    },
    async fetchData(params,size,num) {
      const { data, code } = await getDataPieChartData(params)
      if (code === 0) {
        let data1 = data[0] || {}
        let data2 = data[1] || {}
        this.initPieChart(this.$refs.pieChart, data1) // 初始化饼图
        this.initPieChart(this.$refs.pieChart2, data2) // 初始化饼图
      }
      console.log(params, 'pppp')

      let newobj = {
        page: num,
        size: size,
        obj: this.queryData
      }
      const res = await getDataJobTicket(newobj)
      if (res.code === 0) {
        return {
          code: 0,
          data: res.data.records.map(v => {
            return {
              ...v,
              ...v.workItem,
              beginTime1: v.beginTime,
              endTime1: v.endTime,
              kxzxTime: v.kxzxTime,
              avgTime: v.avgTime
            }
          }),
          total: res.data.total
        }
      }
    },
    getData(size,num) {
      let newobj = {
        page: num,
        size: size,
        obj: this.queryData
      }
      getDataJobTicket(newobj).then(res => {
        if (res.code == 0) {
          console.log(res.data, 'ddd')
          this.total = res.data.total;
          this.newData = res.data.records
        }
      })
    },
    async getAllStationNames() {
      this.stationNameOptions = []
      const res = await getStationNames()
      if (res.msg) {
        this.$message.info(res.msg)
      } else {
        this.stationNameOptions = res.data
      }
    },
    async postDepart() {
      const res = await postShiftPlanDepart(this.postData)
      if (res.code === 0) {
        this.$message.success('修改成功！')
      }
    },
    reset() {
      // this.totalDataLength = 0
      // this.rcvTableData = []
      this.queryData.startTime = new Date(new Date().getTime() - 3600 * 1000 * 24)
      this.queryData.endTime = new Date(new Date().getTime())
      this.queryData.stationName = ''
      this.queryData.trainNo = ''
    },
    search() {
      this.getData()
      this.$refs.table.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>

<style>
.custom-table .el-table thead {
  color: black !important;
}
.custom-table .el-table {
  color: black !important;
}
</style>
